<template>
  <el-form :model="roleForm" :ref="formRef" :rules="rules" label-width="90">
    <el-row>
      <el-col :span="12">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="roleForm.name" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="排序" prop="sort_id">
          <el-input v-model.number="roleForm.sort_id" autocomplete="off"/>
        </el-form-item>

      </el-col>
      <el-col :span="12">
        <el-form-item label="状态" prop="status">
          <el-switch
              v-model="roleForm.status"
              inline-prompt
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
              :active-value="20"
              :inactive-value="10"
              active-text="已启用"
              inactive-text="已禁用"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="备注" prop="remark">
      <el-input v-model="roleForm.remark" type="textarea" rows="5" autocomplete="off"/>
    </el-form-item>
  </el-form>
  <el-divider/>
  <el-button @click="handleClose">取消</el-button>
  <el-button type="primary" @click="handleSubmit">
    提交
  </el-button>
</template>

<script setup lang="ts">

import {PropType, reactive, ref} from "vue";
import {ElMessage, FormInstance, FormRules} from "element-plus";
import {RoleAddR, RoleUpdateR} from "@/api/role";
import {RoleRequest} from "@/interface/role";

// interface RoleRequest  {
//   id: number,
//   name: string,//角色名称
//   remark: string,//备注
//   status: number,//状态：10.停用，20.在用
//   created_at?: number,
//   updated_at?: number,
// }


const props = defineProps({
  action: {
    type: String,
    default: '',
  },
  roleForm: {
    type: Object as PropType<RoleRequest>,
    default: {}
  }
})

const formRef = ref<FormInstance>()
//表单校验
const rules = reactive<FormRules>({
  name: [
    {required: true, message: '必填', type: "string", trigger: ['blur', 'change']}
  ],
  sort_id: [
    {required: true, message: '必填', type: "number", trigger: ['blur', 'change']}
  ],
  status: [
    {required: true, message: '必填', type: "enum", enum: [10, 20], trigger: ['blur', 'change']}
  ]
})

const emit = defineEmits(['close'])
//取消
const handleClose = () => {
  emit('close')
}

const handleSubmit = () => {
  switch (props.action) {
    case 'add':
      addRole()
      break
    case 'update':
      editRole()
      break
    default:

  }
}


//新增角色
const addRole = () => {
  RoleAddR(props.roleForm!).then(res => res.data).then(res => {
    switch (res.code) {
      case 200:
        ElMessage.success(res.msg)
        handleClose()
        break
      default:
        // ElMessage.error(res.msg)
    }
  })
}

//修改
const editRole = () => {
  RoleUpdateR(props.roleForm as RoleRequest).then(res => res.data).then(res => {
    switch (res.code) {
      case 200:
        ElMessage.success(res.msg)
        handleClose()
        break
      default:
        // ElMessage.error(res.msg)
    }
  })
}


</script>

<style scoped lang="less">

</style>